import { VNode, } from 'vue'
import { TextComponentProps} from './defaultProps'
export interface PropToForm {
  component: string;
  subComponent?: string; 
  extraProps?: {[key: string]: any};
  options?: {text: string | VNode; value: any }[];
  // value?: string;
  text?: string;
  initalTransform?: (v: any) => any;
  afterTransform?: (v: any) => any;
  valueProp?: string;
  eventName?: string;
  // events?: {[key: string]: any}; //在渲染表单的时候，动态添加的
}

export type PropsToForms = {
  [P in keyof TextComponentProps]?: PropToForm
}
const fonatFamilyArr = [
  { text: '宋体', value: '"SimSun","STSong"' },
  { text: '黑体', value: '"SimHei","STHeiti"' },
  { text: '楷体', value: '"KaiTi","STKaiti"' },
  { text: '仿宋', value: '"FangSong","STFangsong"' },
]

const fonatFamilyOptions = fonatFamilyArr.map(font => {
  // 将下拉转换成虚拟DOM h(obj, config, children)
  return {
    value: font.value, 
    text: <span style={{fontFamily: font.value}}>{font.text}</span> as VNode
    // text: h('span', {style: { fontFamily: font.value}, font.text})
  }
})
// 表组组件属性
export const mapPropsToForms: PropsToForms = {
  text: {
    text:'文本',
    component: 'a-textarea',
    extraProps: { rows: 3 },
    afterTransform: (e: any) => e.target.value,
  },
  fontSize:{ // 通过字体大小控制
    text:'字号',
    component: 'a-input-number',
    initalTransform: (v: string) => parseInt(v,10),
    afterTransform: (e: any) =>  e ? `${e}px`: '',
  },
  lineHeight:{ //通过行高控制slider
    text:'行高',
    component: 'a-slider',
    extraProps:{
      min: 0,
      max: 3,
      step: 0.1
    },
    initalTransform: (v: string) => parseFloat(v),
    afterTransform: (e: number) => e.toString(),
  },
  textAlign: {
    component: 'a-redion-group',
    subComponent: 'a-radio-button',
    text:'对齐',
    afterTransform: (e: any) => e.target.value,
    options: [
      {value: 'left', text: '左'},
      {value: 'center', text: '中'},
      {value: 'right', text: '右'},
    ]
  },
  fontFamily: {
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '字体',
    options: [
      {  text: '无',value: '', },
      ...fonatFamilyOptions
    ]
  },
}